<!--
  时间段选择
  props:
    v-model(show) boolean 是否显示
-->
<template>
  <div>
    <van-popup
      :value="show"
      :close-on-click-overlay="false"
      position="bottom"
      round
      @click-overlay="onClickOverlay"
    >
      <div class="main-wrapper">
        <div class="date-wrapper">
          <div class="now">
            <span class="now-date" @click="showCalendar = true">{{selectDateText}} {{dateText}}</span>
          </div>
        </div>
        <div class="time-slot-wrapper">
          <div class="time-slot">
            <span style="margin-left: 8px;">不限</span>
          </div>
          <div class="time-slot" v-for="time in timeSlot" :key="time">
            <van-checkbox shape="square" @click="onSelTime(time)" :value="selTimeSlot.includes(time)">{{time}}</van-checkbox>
          </div>
        </div>
        <div class="btn-wrapper">
          <f7-row>
            <f7-col :width="45">
              <f7-button raised round large @click="handleBtnCancel">取消</f7-button>
            </f7-col>
            <f7-col :width="45">
              <f7-button raised round large active @click="handleBtnConfirm">确定</f7-button>
            </f7-col>
          </f7-row>
        </div>
      </div>
    </van-popup>
    <van-calendar v-model="showCalendar" @confirm="handleConfirm" />
  </div>

</template>

<script>
import { Calendar, Checkbox, Popup } from "vant"

function formatTime(text) {
  return text < 10 ? `0${text}` : text;
}
export default {
  name: "qm-date-picker",
  components: {
    [Calendar.name]: Calendar,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: "show",
    event: "show"
  },
  data() {
    return {
      showCalendar: false,
      selectDateText: null,
      selectTimeStamp: null,
      nowDateTimeStamp: null,
      timeSlot: [],
      selTimeSlot: []
    }
  },
  created() {
    this.selectDateText = this.formatDate(null, ".");
    let nowDate = new Date(new Date().toLocaleDateString());
    this.selectTimeStamp = nowDate.getTime();
    this.nowDateTimeStamp = nowDate.getTime();
    this.formatTimeSlot();
  },
  methods: {
    handleConfirm(date) {
      this.selectDateText = this.formatDate(date, ".");
      this.selectTimeStamp = date.getTime();
      this.showCalendar = false;
    },
    formatDate(date, separator = "/") {
      let dateObj = date ? new Date(date) : new Date();
      return [dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate()].join(separator);
    },
    formatTimeSlot() {
      let timeStamp = this.nowDateTimeStamp;
      let nowDateTimeStamp = this.nowDateTimeStamp;
      while (timeStamp - nowDateTimeStamp < 86400000) {
        let startTime = `${formatTime(new Date(timeStamp).getHours())}:${formatTime(new Date(timeStamp).getMinutes())}`;
        timeStamp = timeStamp += 1000 * 60 * 30;
        let endTime = `${formatTime(new Date(timeStamp).getHours())}:${formatTime(new Date(timeStamp).getMinutes())}`;
        this.timeSlot.push(`${startTime}-${endTime}`);
      }
    },
    onSelTime(time) {
      let pos = this.selTimeSlot.indexOf(time)
      pos === -1 ? this.selTimeSlot.push(time) : this.selTimeSlot.splice(pos, 1);
    },
    onClickOverlay() {
      this.$emit("show", false);
    },
    handleBtnCancel() {
      this.onClickOverlay();
    },
    handleBtnConfirm() {
      this.onClickOverlay();
    }
  },
  computed: {
    dateText() {
      let interval = Math.floor((this.selectTimeStamp - this.nowDateTimeStamp) / 86400000);
      let text = ["今天","明天","后天"];
      return text[interval] ? text[interval] : `${interval}天后`;
    }
  }
}
</script>

<style lang="less" scoped>
.main-wrapper {
  padding-top: calc(23px * var(--ratio));
}
.date-wrapper {
  display: flex;
  justify-content: center;
  .now {
    display: flex;
    align-items: center;

    .now-date {
      display: flex;
      align-items: center;
      position: relative;
      font-size: var(--font-size-maintitle);
      color: var(--color-text-title);
      line-height: calc(50px * var(--ratio));

      &::after {
        content: "";
        display: inline-block;
        margin-left: calc(10px * var(--ratio));
        margin-top: calc(12px * var(--ratio));
        // position: absolute;
        // top: 50%;
        // right: calc(-32px * var(--ratio));
        // transform: translateY(-50%);
        border: calc(12px * var(--ratio)) solid var(--color-text-subtext);
        border-color: var(--color-text-subtext) transparent transparent;
      }
    }
  }
}

.time-slot-wrapper {
  margin-top: calc(27px * var(--ratio));
  padding-left: calc(32px * var(--ratio));
  height: 40vh;
  border-top: 1px solid var(--color-divider-background);
  overflow: auto;

  .time-slot {
    display: flex;
    align-items: center;
    height: calc(99px * var(--ratio));
    border-bottom: 1px solid var(--color-divider-background);

    ::v-deep .van-checkbox{
      padding-right: calc(32px * var(--ratio));
      width: 100%;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
  }
}

.btn-wrapper {
  display: flex;
  align-items: center;
  height: calc(167px * var(--ratio));
  .row {
    width: 100%;
    justify-content: space-around;

    ::v-deep .button {
      color: var(--color-text-title);
      border: 2px solid var(--color-divider-line);
      box-shadow: none;
    }

    ::v-deep .button-active {
      color: #fff;
      border: none;
      box-shadow: none;
    }
  }
}
</style>
